<template>
    <div class="flex justify-between h-18 px-20 mt-6">
        <a-statistic class="flex-1 flex flex-col items-center border-r border-db" title="订单完成率" :value="9.3" :precision="2"
            suffix="%" :value-style="{ color: '#2ba471' }">
            <template #prefix>
                <ArrowUpOutlined />
            </template>
        </a-statistic>
        <a-statistic class="flex-1 flex flex-col items-center" title="用户满意度" :value="9.3" :precision="2" suffix="%"
            :value-style="{ color: '#d54941' }">
            <template #prefix>
                <arrow-down-outlined />
            </template>
        </a-statistic>
    </div>
    <div class="flex-1 w-full grid grid-cols-4 gap-4 mt-12 px-2">
        <div v-for="item in 8" :key="item" class="flex items-center justify-center mb-8">
            <div class="w-14 h-14 mr-4 bg-blue-100 rounded-full p-3">
                <img :src="number1" alt="">
            </div>
            <div>
                <div class="mb-6">已完成</div>
                <div>
                    <span class="text-3xl">120</span>
                    &nbsp;
                    <span class="text-[#848fa7]">单</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ArrowDownOutlined, ArrowUpOutlined } from '@ant-design/icons-vue';
import number1 from '/public/icon/dashboard/number2.png'

</script>

<style scoped></style>